<script setup>
import { ref, reactive } from "vue";
import ContactListItem from "@/components/ContactListItem.vue";
import navbar from "@/components/navbar.vue";
import pinyin from 'pinyin'
import { useStore } from '@/store/useStore.js'
import router from '@/router'

const store =useStore();

// 存储分类标题
const classifyTitle = reactive(['#'])
// 获取列表盒子
const list_box = ref(null)

const data = store.friendlist 


const openContactDetails = (item) => {
  router.push({
    path: `/friendDetail/${item.id}`,
    query: {
      contactDetails: JSON.stringify({ ...item }),
    },
  });
};

// 提取中文首字母的函数
const chineseInitial = (initial) => {
  let initials = pinyin(initial, { style: pinyin.STYLE_FIRST_LETTER });
  return initials.map(item => item.join(''))[0];
}

// 判断是首字母否是中文的函数
const isChinese = (chinese) => {
  const code = chinese.charCodeAt(0)
  return (
    (code >= 0x4e00 && code <= 0x9fff) || // 常用汉字
    (code >= 0x3400 && code <= 0x4DBF) || // 扩展汉字A区
    (code >= 0x20000 && code <= 0x2A6DF) || // 扩展汉字B区
    (code >= 0x2A700 && code <= 0x2B73F) || // 扩展汉字C区
    (code >= 0x2B740 && code <= 0x2B81F) || // 扩展汉字D区
    (code >= 0x2B820 && code <= 0x2CEAF) || // 扩展汉字E区
    (code >= 0xF900 && code <= 0xFAFF) // 兼容汉字
  )
}

// 获取到每个人的首字母进行分类组成新的数组
const classifyFriends = (data) => {
  const arr = []
  // 进行处理分类
  const map = new Map()
  // 数据进行遍历
  data.forEach(item => {
    // 拿到用户名
    let upperCase = item.nickname
    // 判断是否是中文
    if (isChinese(upperCase)) {
      // 如果是中文进行转首字母大写
      upperCase = chineseInitial(upperCase).charAt(0).toUpperCase()
      classifyTitle.push(upperCase)
    } else {
      // 不是中文直接转换为大写
      upperCase = upperCase.charAt(0).toUpperCase()
      classifyTitle.push(upperCase)
    }
    // 查找是否已存在该函数
    let cat = map.get(upperCase)
    // 如果不存在
    if (!cat) {
      cat = {
        id: arr.length + 1,
        code: upperCase,
        arr: []
      }
      // 添加到数据中
      arr.push(cat)
      // 进行添加键名和键值
      map.set(upperCase, cat)
    }
    // 存在直接添加item
    cat.arr.push(item)
  })
  // 返回数据 进行A-Z排序处理
  let res = arr.slice().sort((a, b) => a.code.localeCompare(b.code))

  return res
}

// 存储分类数据
const initialClassifyGather = reactive(classifyFriends(data))

// 点击导航
const tabBtn = (i, index) => {
  if (i !== '#') {
    if (index > 0 && index <= list_box.value.children.length) {
      const scrollTop = list_box.value.children[index - 1].offsetTop
      console.log(scrollTop);
      console.dir(list_box.value.children[index - 1]);
      list_box.value.scrollTo({
        top: scrollTop,
        behavior: 'smooth'
      })
    } else {
      console.error('index长度不可用');
    }
  } else {

  }

}



</script>

<template>
  <div class="box">
    <div class="top">
      <navbar :title="'通讯录'" showSearch="true" />
    </div>

    <ul class="list" ref="list_box">
      <template v-for="item in initialClassifyGather" :key="item.id">
        <ContactListItem :item="item" @click="openContactDetails(item)" />
      </template>
    </ul>
    <!-- 列表导航 -->
    <div class="navigation">
      <p v-for="(i, index) in [...new Set(classifyTitle.slice().sort((a, b) => a.localeCompare(b)))]" :key="index"
        @click="tabBtn(i, index)">{{ i }}</p>
    </div>
    <div class="bottom"></div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  width: 100vw;
  height: 100vh;
  background-color: #ededed;
  overflow: hidden;

  .top {
    width: 100%;
    height: 50px;
  }

  .list {
    width: 100%;
    height: calc(100vh - 116px);
    overflow:hidden;
    overflow-y: auto;
  }
  .bottom{
    height: 66px;
  }
  .navigation {
    position: fixed;
    right: 10px;
    top: 130px;

    p {
      width: 15px;
      height: 15px;
      text-align: center;
      line-height: 15px;
      font-size: 13px;
      margin: 5px 0 0;
    }

  }
}
</style>
